<template>
  <el-dialog :model-value="dialogVisible" title="编辑车型" width="700" :before-close="resetForm"
    :close-on-click-modal="false">
    <el-alert title="注意：驾校端仅可编辑车型图标和启用状态" type="primary" style="margin-bottom: 20px;margin-top: -20px;"
      :closable="false" />
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
      <!-- <el-form-item label="排序" prop="sort">
        <el-input :disabled="true" v-model="ruleForm.sort" placeholder="请输入" />
      </el-form-item> -->
      <el-form-item label="车型名称" prop="carName">
        <el-input :disabled="true" v-model="ruleForm.carName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="车型" prop="carTypes">
        <el-input :disabled="true" v-model="ruleForm.carTypes" placeholder="请输入,如果有多个请用逗号分割" />
      </el-form-item>
      <el-form-item label="图标" prop="img">
        <el-input v-model="ruleForm.img" style="display: none"></el-input>
        <div class="avatar-uploader" @click="showImageChooseDialog = true">
          <el-image v-if="storeLogo" :src="storeLogo" class="avatar" fit="contain"></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
              <Plus />
            </el-icon></i>
          <div v-if="storeLogo" class="mask">替换</div>
          <el-icon v-if="storeLogo" class="del-image" :size="20" @click.stop="handleDelImg">
            <CircleCloseFilled />
          </el-icon>
        </div>
      </el-form-item>

      <el-form-item label="车型描述" prop="carDesc">
        <el-input :disabled="true" v-model="ruleForm.carDesc" type="textarea" :row="5"></el-input>
      </el-form-item>

      <el-form-item label="启用状态" prop="status">
        <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :loading="editLoading" @click="submitForm(ruleFormRef)">确认</el-button>
        <el-button @click="resetForm">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <image-selected-dialog v-if="showImageChooseDialog" :single-type="selectImageSingle"
    :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"
    :operationType="false"></image-selected-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { editsCarType } from '@/api/driverSchoolApi'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'

const props = defineProps({
  dialogVisible: {
    type: Boolean
  },
  editInfo: {
    type: Object,
    default: () => {
      id: ''
    }
  }
})
console.log(props.editInfo, "editInfo===");

const emit = defineEmits(['closeDialog'])

const storeLogo = ref('')
const editLoading = ref(false)

interface RuleForm {
  sort: string
  carName: string
  carTypes: string
  carDesc: string
  img: string
  status: number
  [propName: string]: any
}

const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<RuleForm>({
  sort: '',
  carName: '',
  carTypes: '',
  carDesc: '',
  img: '',
  status: 1
})

const rules = reactive<FormRules<RuleForm>>({
  sort: [{ required: true, message: '不能为空', trigger: 'blur' }],
  carName: [{ required: true, message: '不能为空', trigger: 'blur' }],
  carTypes: [{ required: true, message: '不能为空', trigger: 'blur' }],
  // img: [{ required: true, message: '不能为空', trigger: 'change' }],
  status: [{ required: true, message: '不能为空', trigger: 'change' }]
})


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      edit()
    } else {
    }
  })
}

async function edit() {
  try {
    editLoading.value = true
    let obj = {
      carModelId: props.editInfo.id,
      customImg: storeLogo.value,
      customStatus: ruleForm.status
    }
    const res = await editsCarType(obj)
    if (res.code === '00000') {
      ElMessage.success('修改成功')
      emit('closeDialog', true)
    }
  } catch (e) {
  } finally {
    editLoading.value = false
  }
}

const resetForm = () => {
  emit('closeDialog')
}

const showImageChooseDialog = ref(false)
const selectImageSingle = ref(true)
const handleCloseImageDialog = (value: any) => {
  if (value && value.fileUrl) { storeLogo.value = value.fileUrl }
  showImageChooseDialog.value = false
}
const handleDelImg = () => {
  storeLogo.value = ''
}

onMounted(() => {
  if (props.editInfo.id) {
    let allKey = Object.keys(ruleForm)
    for (const key in props.editInfo) {
      if (allKey.includes(key)) {
        ruleForm[key] = props.editInfo[key]
      }
    }

    storeLogo.value = ruleForm.img
  }
})
</script>

<style scoped lang="scss">
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  line-height: 178px;

  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 12px;
  }

  .del-image {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #8c939d;
  }

  &:hover .mask {
    opacity: 1;
  }

  &:hover .del-image {
    display: block;
  }
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

:deep(.el-textarea__inner) {
  height: 100px;
}
</style>
